<template>
  <a-drawer
    v-model:open="drawerVisible"
    width="50%"
    placement="right"
    title="Config详情"
    :closable="true"
    @close="closeDrawer"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="Id">
            {{ itemDetail.id }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="ServiceType">
            {{ getServiceTypeText(itemDetail.serviceType) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="Provider">
            {{ itemDetail.provider }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="ConfigJson">
            {{ itemDetail.configJson }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="Enabled">
            {{ itemDetail.enabled }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="createdTime">
            {{ itemDetail.createdTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="updatedTime">
            {{ itemDetail.updatedTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { Config } from "./Config";

const drawerVisible = ref(false);
const itemDetail = ref<Partial<Config>>({});
const getServiceTypeText = (value: string | undefined): string => {
  if (!value) return '';
  const texts: Record<string, string> = {
    '1': 'MAP,',
    '2': 'OSS,',
    '3': 'SMS,',
    '4': 'OCR',
  };
  return texts[value] || value;
};

function openDrawer(item: Config) {
  itemDetail.value = { ...item };
  drawerVisible.value = true;
}

function closeDrawer() {
  drawerVisible.value = false;
  itemDetail.value = {};
}

defineExpose({ openDrawer });
</script>

<style scoped>
.ant-descriptions {
  margin-bottom: 20px;
}
</style>